Add new templates for legacy buyer notices in WooCommerce core #8732
Conversation
woocommercebot
requested review from
a team and
wavvves
and removed request for
a team
|
The release ZIP for this PR is accessible via: Script Dependencies ReportThere is no changed script dependency between this branch and trunk. This comment was automatically generated by the TypeScript Errors Report
assets/js/atomic/blocks/product-elements/shared/product-selector.tsx
assets/js/atomic/blocks/product-elements/shared/with-product-selector.js assets/js/atomic/blocks/product-elements/title/block.tsx assets/js/base/components/cart-checkout/address-form/address-form.tsx assets/js/base/components/cart-checkout/address-form/test/index.js assets/js/base/components/cart-checkout/product-badge/index.tsx assets/js/base/components/cart-checkout/shipping-calculator/address.tsx assets/js/base/components/cart-checkout/totals/coupon/index.tsx assets/js/base/components/country-input/country-input.tsx assets/js/base/components/product-list/product-list.tsx assets/js/base/components/product-list/product-sort-select/index.tsx assets/js/base/components/product-name/index.tsx assets/js/base/components/radio-control/option-layout.tsx assets/js/base/components/read-more/index.tsx assets/js/base/components/reviews/review-sort-select/index.tsx assets/js/base/components/state-input/state-input.tsx assets/js/base/components/title/index.tsx assets/js/blocks/active-filters/edit.tsx assets/js/blocks/attribute-filter/edit.tsx assets/js/blocks/cart-checkout-shared/payment-methods/payment-method-options.js assets/js/blocks/cart-checkout-shared/sidebar-notices/index.tsx assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-pickup-options-block/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/block.tsx assets/js/blocks/checkout/inner-blocks/checkout-terms-block/test/frontend.js assets/js/blocks/checkout/phone-number/index.tsx assets/js/blocks/featured-items/block-controls.tsx assets/js/blocks/featured-items/image-editor.tsx assets/js/blocks/featured-items/inspector-controls.tsx assets/js/blocks/featured-items/with-api-error.tsx assets/js/blocks/featured-items/with-edit-mode.tsx assets/js/blocks/featured-items/with-editing-image.tsx assets/js/blocks/featured-items/with-featured-item.tsx assets/js/blocks/featured-items/with-update-button-attributes.tsx assets/js/blocks/price-filter/edit.tsx assets/js/blocks/product-best-sellers/inspector-controls.tsx assets/js/blocks/product-category/edit-mode.tsx assets/js/blocks/product-category/inspector-controls.tsx assets/js/blocks/product-new/block.js assets/js/blocks/product-on-sale/block.js assets/js/blocks/product-query/inspector-controls.tsx assets/js/blocks/product-query/inspector-controls/attributes-filter.tsx assets/js/blocks/product-top-rated/block.js assets/js/blocks/products-by-attribute/edit-mode.tsx assets/js/blocks/products-by-attribute/inspector-controls.tsx assets/js/blocks/reviews/reviews-by-category/edit.js assets/js/blocks/reviews/reviews-by-product/edit.js assets/js/blocks/stock-filter/edit.tsx assets/js/editor-components/search-list-control/item.tsx assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx assets/js/extensions/shipping-methods/shared-components/settings-card/index.tsx assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx assets/js/hocs/test/with-categories.js assets/js/hocs/test/with-category.js assets/js/hocs/test/with-product-variations.js assets/js/hocs/test/with-product.js assets/js/hocs/test/with-transform-single-select-to-multiple-select.js assets/js/hocs/with-product-variations.js assets/js/hocs/with-transform-single-select-to-multiple-select.js assets/js/types/type-defs/blocks.ts node_modules/@types/react/index.d.ts node_modules/@types/wordpress__components/node_modules/@types/react/index.d.ts node_modules/framer-motion/dist/framer-motion.d.ts packages/checkout/components/panel/index.tsx packages/checkout/components/store-notices-container/index.tsx packages/checkout/components/store-notices-container/snackbar-notices.tsx packages/checkout/components/text-input/text-input.tsx packages/checkout/components/totals-wrapper/index.tsx packages/checkout/components/totals/item/index.tsx |
|
Size Change: +82 B (0%) Total Size: 1.09 MB
ℹ️ View Unchanged
|
mikejolley
force-pushed
the
refactor/buyer-notices
branch
from
e33a757 to
1bdba0f
Compare
mikejolley
force-pushed
the
add/legacy-buyer-notices
branch
from
2d396fe to
e84bf3c
Compare
* Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <[email protected]> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <[email protected]>
* Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <[email protected]> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <[email protected]>
* Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <[email protected]> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <[email protected]>
* Notice banner component * Snackbar support * Switch to new components * Finish snackbar implementation * Summary notice * Styling issues * Fix text wrap in shipping calculator * Storybook entries * Docs and tests for NoticeBanner * Framer motion to avoid components dependency * Snackbar list stories * Docs for snackbar list * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <[email protected]> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <[email protected]> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <[email protected]> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <[email protected]> * Update assets/js/base/components/notice-banner/README.md Co-authored-by: Thomas Roberts <[email protected]> * Types/docblocks * Docs * Update notice type * Use NoticeBannerProps for type of noticeProps * Raw html to fix notice encoding * getClassNameFromStatus is unused * Update position text * Clarify notice text * Fix hover style in whisper TT3 theme * remove div styles * Add new templates for legacy buyer notices in WooCommerce core (#8732) * Add templates for legacy core notices * Update src/Domain/Services/Notices.php Co-authored-by: Paulo Arromba <[email protected]> * Remove debugging code * DRY get_notices_template * Simplify error template * Fix padding * Only include new notices if using block cart/checkout --------- Co-authored-by: Paulo Arromba <[email protected]> * Fix view box tag * Hover and focus styles * Styling when notices added via ajax * Remove margin change * Implement react-transition-group instead of framer (#8920) * Add screenshots to docs --------- Co-authored-by: Thomas Roberts <[email protected]> Co-authored-by: Paulo Arromba <[email protected]>
This is a solution to apply the new notice designs to legacy notices in WooCommerce core from the Blocks side. I'm basing this on the #8659 branch.
It works by using the
wc_get_templatefilter to replace the core template with the modified block template. The modified template includes new markup and an SVG icon (something we cannot do with CSS alone).For styles, we just enqueue the blocks CSS stylesheet. It should be cached most of the time if the store is using blocks.
Screenshots
These are examples of core notices with the new template + styling applied:
Testing
Automated Tests
User Facing Testing
wc_add_noticefunction.WooCommerce Visibility